const empty = document.querySelector('div.empty')
const h1 = document.querySelector('h1')
let name;

/*本来应该用循环为能够拖动的元素添加事件的，但为了便于理解，就直接对整个文档添加事件*/


/* 拖动开始 */
document.addEventListener('dragstart', (e) => {
    name = e.target.alt;
}, false)

/* 拖动进行时 */
document.addEventListener('drag', (e) => {
    e.target.style.border = '5px dashed red';
    empty.style.border = '5px dashed red'
}, false)

/* 拖动结束 */
document.addEventListener('dragend', (e) => {
    e.target.style.border = 'none';
    empty.style.border = 'none';
    h1.innerHTML = '拖动你喜欢的图片到空白区域吧'
    h1.style.color = 'black';
}, false)

/* 为空元素添加进入事件 */
empty.addEventListener('dragenter', (e) => {
    if (empty.firstChild) {
        empty.removeChild(empty.firstChild)
    }
    h1.innerHTML = name;
    h1.style.color = 'red';
}, false)


empty.addEventListener('dragover', (e) => {
    /*浏览器默认不能在拖拽以后进行放置，取消默认行为*/
    e.preventDefault();
})

/* 放置事件 */
empty.addEventListener('drop', (e) => {
    /*浏览器默认不能在拖拽以后进行放置，取消默认行为*/
    e.preventDefault();
    e.target.appendChild(document.querySelector(`img[alt=${name}]`));
}, false)

